<template>
    <div class="view_box">
        <div class="cont">
            <div class="top">
                <div class="top_item">生活</div>
                <div class="top_item">校园</div>
                <div class="top_item">青春</div>
            </div>
            <div class="middle">真的会有人念小学么？</div>
            <div class="btns">
                <div class="btns_item" @click="opendig">
                    <div class="btns_item_left"><img src="@/assets/images/pinglun.png" alt=""></div>
                    <div class="btns_item_right">添加评论</div>
                </div>
                <div class="btns_item">
                    <div class="btns_item_right">默认排序</div>
                    <div class="btns_item_left"><img src="@/assets/images/updown.png" alt=""></div>
                </div>
            </div>
        </div>
        <el-dialog
            :visible.sync="dialogVisible"
            width="600px"
            title="280条评论"
            center
            :before-close="handleClose">
            <div class="dig">
                <!-- <div class="nopinglun">
                    <div class="no_img">
                        <img src="@/assets/images/cuet5.png" alt="">
                    </div>
                    <div class="text">
                        还没有评论哦
                    </div>
                </div> -->
                <div class="haspinglun">
                    <div class="has_item" v-for="item in 10" :key="item">
                        <div class="has_item_top">
                            <div class="has_item_top_left">
                                <img src="@/assets/logo.png" alt="">
                            </div>
                            <div class="has_item_top_right">战斗力旺旺的伯爵</div>
                        </div>
                        <div class="has_item_con">
                            说白了，百度只能有一个光环。。。说白了，百度只能有一个光环。。。
                            说白了，百度只能有一个光环。。。说白了，百度只能有一个光环。。。
                            说白了，百度只能有一个光环。。。说白了，百度只能有一个光环。。。
                        </div>
                        <div class="has_time">3-15</div>
                    </div>
                </div>
                <div style="width: 600px;height:100px"></div>
                <div class="bottom_line">
                    <div class="left_avant">
                        <img src="@/assets/logo.png" alt="">
                    </div>
                    <div class="textarea">
                        <textarea
                         cols="30"
                         rows="10"
                         placeholder="评论千万条，友善第一条"
                         v-model="textareaVal"
                         ></textarea>
                         <div class="btn">
                            <el-button type="primary" v-show="textareaVal !== ''">发表</el-button>
                            <el-button type="primary" disabled v-show="textareaVal == ''">发表</el-button>
                         </div>
                    </div>
                </div>
            </div>
            </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
      return {
        dialogVisible: false,
        textareaVal:''
      };
    },
    methods: {
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      opendig() {
        this.dialogVisible = true
      },
    }
}
</script>
<style scoped lang="scss">
.view_box {
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .cont {
        width: 1000px;
        .top {
            display: flex;
            .top_item {
                height: 30px;
                padding: 0 12px;
                font-size: 14px;
                line-height: 30px;
                color: #056DE8;
                vertical-align: top;
                border-radius: 100px;
                background: rgba(5,109,232,0.1);
                margin-right: 10px;
            }
        }
        .middle {
            font-size: 26px;
            font-weight: 700;
            margin: 5px 0;
        }
        .btns {
            display: flex;
            .btns_item {
                display: flex;
                align-items: center;
                color: #949DB1;
                .btns_item_left {
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .btns_item:hover {
                cursor: pointer;
            }
            .btns_item:nth-child(2) {
                    margin-left: 20px;
                    .btns_item_right {
                        margin-right: 5px;
                    }
             }
        }
    }
}
.dig {
    position: relative;
    min-height: 300px;
    padding: 20px;
    box-sizing: border-box;
    .has_item_top {
        display: flex;
        align-items: center;
        .has_item_top_left {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            margin-right: 10px;
        }
        .has_item_top_right {
            font-weight: 700;
        }
        
    }
    .has_item_con {
        margin: 10px 0;
        padding-left: 40px;
        font-size: 13px;
    }
    .has_time {
        color: #ACACAC;
        font-size: 12px;
        padding-left: 40px;
        margin-bottom: 10px;
    }
    .nopinglun {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .no_img {
            width: 200px;
            height: 200px;
            img{
                width: 100%;
                height: 100%;   
            }
        }
    }
    .bottom_line {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        height: 100px;
        width: 600px;
        .left_avant {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            margin-right: 10px;
        }
        .textarea {
            height: 90px;
            width: 500px;
            position: relative;
            textarea {
                padding: 5px;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                outline: none;
            }
            .btn {
                position: absolute;
                bottom: 5px;
                right: 5px;
            }
        }
    }
}
</style>